<template>
  <div class="goodsinfo-cintainer">

    //控制小球位移
    <transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    



    <!-- 这是商品轮播图区域 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <!-- 
              :isfull="false"----这里是商品详情中的轮播图，让轮播图的宽度自适应
             -->
            <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
					</div>
				</div>
			</div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
				<div class="mui-card-header">{{ goodsinfo.title }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <p class="price">
              市场价:<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now-price">￥{{ goodsinfo.sell_price }}/span>
            </p>
              <p>购买数量<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>
              <p>
                <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                <!-- 分析：如何实现加入购物车的时候  ，拿到选择的数量
                  1：分析发现：按钮属于goodsinfo页面， 数字属于numberbox组件
                  2：由于涉及到了父子组件的嵌套了，所以，无法直接在goodsinfo页面中获取到，选中的商品数量
                  3：如何解决这个问题，涉及到了，子组件向父组件传值（事件调用机制）
                  4：事件调用的本质：父向子传递方法，子调用这个方法，同时把数据当做参数，传递给这个方法
                 -->
              </p>
					</div>
				</div>
			</div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{ goodsinfo.goods_no }}</p>
            <p>库存情况:{{ goodsinfo.stock_quantity }}件</p>
            <p>上架时间:{{ goodsinfo.add_time | dateFormar }}</p>
					</div>
				</div>
        <div class="mui-card-footer">
          <mt-button type="parmary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
        </div>
			</div>
  </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
  data(){
    return{
      id: this.$route.params.id,//江路有参数对象中的id，挂载到data，方便以后调用
      lunbotu:[],//这是轮播图的数据
      goodsinfo:{},//获取到的商品的信息
      ballFlag: false,//这是控制小球隐藏和显示的标识符
      selectedCount:1,//保存用户选中的商品数量，默认认为用户买一个
    }
  },
  created(){
    this.getLunbotu();
    this.getGoodsInfo();
  },
  methods:{
    getLunbotu(){
      this.$http.get('api/getthumiages/'+this.id).then(result =>{
        if(result.body.status === 0){
          //先循环轮播图数组的每一项，为item添加 img属性 因为轮播图组建中，只认识item.img,不认识item.src
          result.body.message.forEach(item =>{
            item.img = item.src
          })
          this.lunbotu = result.body.message;
        }
      })
    },
    //获取商品的信息
    getGoodsInfo(){
      this.$http.get('api/goods/getinfo/'+ this.id).then(result =>{
        if(result.body.status === 0){
          this.goodsinfo = result.body.message[0];
        }
      })
    },
    goDesc(id){
      //点击使用编程时导航跳转到图文介绍
      this.$router.push({name: "goodsdesc",params: {id}})
    },
    goComment(id){
      //点击跳转到评论页面
      this.$router.push({name: "goodscomment",params: {id}})
    },
    addToShopCar(){
      //添加到购物车
      this.ballFlag = !this.ballFlag;
      //得到一个商品对象,拼接出一个要保存到store中car数组里的商品信息对象
      var goodsinfo = {
        id: this.id ,
        count: this.selectedCount, 
        price: this.goodsinfo.sell_price,
        selected:true,
      }
      /*
        this.id=this.$route.params.id
      */
     //调用  store  中的 mutations  来讲商品加入购物车
     this.$store.commit("addToCar", goodsinfo);
    },
    beforeEnter(el){
      el.style.transform="translate(0,0)"
    },
    enter(el,done){
      el.offsetWidth;
      /*
        小球动画优化思路
        1：先分析导致动画不准确定位的本质原因，我们把小球最终位移的位置，已经局限了某一分辨率下的滚动条未滚动的情况下
        2：只要分辨率 和测试的不一样，或者滚动条有一定的滚动距离之后，问题就出现了
        3：因此我们经过分析，得到结论，不能把位移横纵坐标写死了，而是应该根据不同的情况
        动态计算着坐标值
        4：得出解决思路，先得到徽标的横纵坐标 ，在得到小球的横纵坐标，然后让 y  值求差  x值也求差，得到的结果就是小球横纵坐标的要位移的距离
        5：如何获取徽标的和小球的位置？？？  domObject.getBoundingclientRect()
       */

      //  获取小球的在页面中的位置
      const balPosition = this.$refs.ball.getBoundingClientRect()
      //获取徽标在页面中的位置
      const badgePosition = document
      .getElementById('badge')
      .getBoundingClientRect();
      const xDist = badgePosition.left = balPosition.left;
      const yDist = badgePosition.top = balPosition.top;
      el.style.transform = `translate(${xDist}px, ${yDist})`;
      el.style.transition = "all 1s cubic-bezier(.4, -0.3, 1,.68)"
      done()
    },
    afterEnter(el){
      this.ballFlag = !this.ballFlag
    },
    getSelectedCount(count){
      //当组件把选中的数量传递给父组件的时候，把选中的值保存到data上
      this.selectedCount = count;
    }
  },
  components:{
    swiper,
    numbox
  }
}
</script>
<style lang="scss" scoped>
  .goodsinfo-cintainer{
    background-color: #eee;
    overflow: hidden;
  }
  .now-price{
    color: red;
    font-size: 16px;
    font-weight: bold
  }
  .mui-card-footer{
    display: block;
    button{
      margin:15px;
    }
  }
  .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
    
  }
</style>
